<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="{ children: 'children', label: 'deviceName' }"
          highlight-current
          default-expand-all
          node-key="deviceId"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-form inline size="small">
          <el-form-item label="记录时间">
            <el-date-picker
              v-model="query.date"
              :default-time="['00:00:00', '23:59:59']"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="getList">查询</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
            <help />
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" border size="small">
          <el-table-column align="center" label="第一层土壤温度(℃)" prop="temStr" />
          <el-table-column align="center" label="第一层土壤湿度(%RH)" prop="humStr" />
          <el-table-column align="center" label="记录时间">
            <template slot-scope="scope">
              {{ Number(scope.row.recordTime) | moment('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :limit.sync="query.pageSize"
          :page.sync="query.pageNum"
          :total="total"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import historyApi from '@/api/soil/history'

export default {
  data() {
    return {
      treeData: [],
      query: {
        date: [],
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      list: [],
      total: 0
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    getTree() {
      historyApi.soilList().then((res) => {
        let list = []
        for (let i in res.data) {
          list.push({ deviceName: i, children: res.data[i] })
        }
        this.treeData = list
        if (this.treeData[0].children[0].deviceId) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.treeData[0].children[0].deviceId)
          })

          this.query = {
            ...this.query,
            deviceId: this.treeData[0].children[0].deviceId
          }
          this.getList()
        }
      })
    },
    getList() {
      if (this.query.deviceId) {
        this.loading = true
        this.query.startTime = this.query.date ? this.query.date[0] : ''
        this.query.endTime = this.query.date ? this.query.date[1] : ''
        historyApi.getSoilData(this.query).then((res) => {
          this.list = res.rows
          this.total = res.total
          this.loading = false
        })
      }
    },
    handleNodeClick(data) {
      this.query = {
        ...this.query,
        deviceId: data.deviceId
      }
      this.getList()
    },
    handleReset() {
      this.query.date = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped></style>